<template>
	<view v-if="load" class="loading"></view>
	<view class="eq-wrapper" v-else>
		<view class="eq-box1">
			<view class="swiper-container" :class="{ 'oneImage': currentImgs.length == 1 }">
				<view class="swiper-item" :class="'swiper-item-' + index" v-for="(item,index) in currentImgs"
					:key="index">
					<image lazy-load :src="item" mode="aspectFill" @click="previewImg(index)"></image>
				</view>
			</view>
			<view class="pic-btn">
				<view class="circle" @click="toIndex">
					<image src="/static/imgs/i-home.png" mode="widthFix"></image>
				</view>
				<view class="circle" @click="toSale">
					<image src="/static/imgs/i-shoop.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="eq-box2">
			<view class="clothes">
				<view class="c-option" :class="{active: currentIndex == -1}" @click="selIcon">
					<image :src="iconOne" class="optImg" mode="widthFix"></image>
				</view>
				<view class="c-explain">
					<text>颜色</text>
					<text>规格</text>
				</view>
				<view class="c-option opt2" v-for="(item,index) in goodsDetail.result.skuBarInfo.list" :key="index"
					:class="{ active: currentIndex == index }" @click="selectSku(index)">
					<image :src="item.image" class="optImg" mode="widthFix" lazy-load></image>
				</view>
			</view>
			<view class="price">
				<view class="p-layout">
					<view class="p-left">
						<view class="p-bold">¥<text>{{goodsDetail.result.normalPriceV2.nowPrice}}</text> 起</view>
					</view>
					<view class="p-right">
						<text>已售 {{goodsDetail.result.normalPriceV2.sales}}</text>
					</view>
				</view>
			</view>
			<view class="inform" v-for="item in [goodsDetail.result.itemInfo]">
				<view class="inform-text">{{ item.title }}</view>
				<view class="inform-option">
					<image src="/static/imgs/i-user.png" mode="widthFix"></image>
					<text>帮我选</text>
				</view>
			</view>
		</view>

		<view class="eq-box3">
			<!-- 1 -->
			<view class="eq-label" @click="showSize">
				<view class="label-left">
					<text class="grey">选择</text>
					<text class="black">{{ selText }}</text>
				</view>
				<view class="label-right">
					<image class="arrow-right" src="/static/imgs/i-right.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 2 -->
			<view class="eq-label">
				<view class="label-left">
					<text class="grey">发货</text>
					<view class="address">
						<view>该店平均发货时长为1.6天</view>
						<view><text class="line">付款后最晚于3天内发货</text></view>
					</view>
				</view>
			</view>
			<!-- 3 -->
			<view class="eq-label" @click="showServe">
				<view class="label-left">
					<text class="grey">服务</text>
					<view>7天无理由退货 <text class="line">|</text> 延误必赔 <text class="line">|</text> 退货补运费</view>
				</view>
				<view class="label-right">
					<image class="arrow-right" src="/static/imgs/i-right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view v-if="isSize" class="eq-size-mask" @click="hideSize"></view>
		<view class="eq-sizeDialog" :class="{ active: isSize }" v-if="isSize">
			<view class="box">
				<view class="b-header">
					<image :src="curskuImgs" mode="widthFix" @click="previewImg(0)"></image>
					<view class="b-msg">
						<view class="price">¥{{curDiaPrice}}</view>
						<view>库存：<text class="">{{ currentStock }}件</text></view>
						<view class="option">{{ sizeDialogTop }}</view>
					</view>
					<view class="close" @click="hideSize">×</view>
				</view>
				<view class="b-mid">
					<view class="module" v-if="onlyColors[0]!==undefined">
						<view class="cap">颜色</view>
						<view class="t-color">
							<view class="type">
								<text class="b" v-for="color in onlyColors" :class="{active: selColor == color}"
									@click="selectColor(color)">{{color}}</text>
							</view>
						</view>
					</view>
					<view class="module" v-if="sizes[0].size!==undefined">
						<view class="cap">尺码</view>
						<view class="type">
							<text class="b" v-for="(item,index) in sizes"
								:class="{active: selSize == item.size, null: item.stock == 0}"
								@click="selectSize(item)">{{item.size}}</text>
						</view>
					</view>
					<view class="module">
						<view class="cap">数量</view>
						<view class="type">
							<text class="n" @click="reduceNum">-</text>
							<text class="n">{{number}}</text>
							<text class="n" @click="addNum">+</text>
						</view>
					</view>
				</view>
			</view>
			<view class="b-footer">
				<view class="add" @click="addToCart">加入购物车</view>
				<view class="buy">立即购买</view>
			</view>
		</view>

		<view v-if="isServe" class="eq-size-mask" @click="hideServe"></view>
		<view class="eq-serveDialog" :class="{ active: isServe }" v-if="isServe">
			<view class="d-top">
				<view class="title">服务说明</view>
				<view class="close" @click="hideServe">×</view>
			</view>
			<view class="d-mid">
				<view class="d-cont">
					<view class="d-first">7天无理由退货</view>
					<view class="d-second">
						物流签收后7天内买家可无理由退货，需满足退货条件
					</view>
				</view>
				<view class="d-cont">
					<view class="d-first">延误必赔</view>
					<view class="d-second">
						极速发货、送货保障，若发货时间晚于商家承诺时间或快递派送时间晚于平台标准，可获得延误补贴。
					</view>
				</view>
				<view class="d-cont">
					<view class="d-first">退货补运费</view>
					<view class="d-second">
						订单退货完成后，根据实际发货与收货地址，预计可获7~20元运费补贴，以实际到账为准。
					</view>
				</view>
			</view>
		</view>

		<view class="eq-box4">
			<view class="comment">
				<view class="c-head">
					<view class="c-title">评论({{ goodsDetail.result.rateInfoV2.cRate || 0 }})</view>
					<view class="c-sorce">
						<view class="tip">
							<view v-if="goodsDetail.result.rateInfoV2 && goodsDetail.result.rateInfoV2.cScore">评分<text
									class="pink">{{goodsDetail.result.rateInfoV2.cScore}}</text></view>
							<view v-else>暂无评分</view>
							<image class="arrow-right" src="/static/imgs/i-right.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="mark-mid">
					<view class="opt" v-for="(tag, index) in rateTags" :key="index">{{tag.value}} {{tag.num}}</view>
				</view>
				<view class="card">
					<view class="c-mid" v-for="comment in rateList" :key="comment.id">
						<view class="m-top">
							<view class="left">
								<image class="headImg" :src="comment.user.avatar" mode="widthFix"></image>
							</view>
							<view class="right">
								<text class="username">{{ comment.user.uname }}</text>
								<text class="date">{{ formatDate(comment.created) }}</text>
							</view>
						</view>
						<view class="m-connent">
							{{ comment.content || "此用户没有填写评价。" }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="eq-box5">
			<view class="mark-head">
				<view class="left">
					<view class="m-pic" @click="toStore">
						<image :src="goodsDetail.result.shopInfo.shopLogo" mode="widthFix"></image>
					</view>
					<view class="m-msg">
						<view class="name">{{ goodsDetail.result.shopInfo.name }}</view>
						<view class="txt">
							<image class="arrow-right" src="/static/imgs/i-fstar.png" mode="widthFix"></image>
							<text>{{ goodsDetail.result.shopInfo.saleDescV2 }}</text>
						</view>
						<view class="types">
							<text
								v-for="(label, index) in goodsDetail.result.shopInfo.shopLabels">{{ label.text }}</text>
						</view>
					</view>
				</view>
				<view class="right" @click="toStore">
					<text>进店</text>
					<image class="arrow-right" src="/static/imgs/i-right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="eq-box6">
			<view class="title">
				<view class="t1" :class="{active:aTab == '图文详情'}" @click="switchTab('图文详情')">图文详情</view>
				<view class="t1" :class="{active:aTab == '商品参数'}" @click="switchTab('商品参数')">商品参数</view>
			</view>
			<view class="desc">{{ goodsDetail.result.detailInfo.desc }}</view>
			<view class="detailImg" v-for="(item,index) in detailImgs" :key="index">
				<image :src="item" lazy-load mode="widthFix"></image>
			</view>
			<view class="goods">
				<view class="g-title">商品详情</view>
				<view class="g-layout">
					<view class="g-box">
						<view class="g-typename">厚薄</view>
						<view class="g-params">常规</view>
					</view>
					<view class="g-box">
						<view class="g-typename">尺码</view>
						<view class="g-params">XL码</view>
					</view>
					<view class="g-box">
						<view class="g-typename">材质</view>
						<view class="g-params">其他</view>
					</view>
					<view class="g-box">
						<view class="g-typename">腰线高度</view>
						<view class="g-params">高腰</view>
					</view>
					<view class="g-box">
						<view class="g-typename">季节</view>
						<view class="g-params">春夏</view>
					</view>
					<view class="g-box">
						<view class="g-all">
							<text>查看全部&尺码表</text>
							<image class="arrow-right" src="/static/imgs/i-right.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="eq-footer">
			<view class="eq-layout">
				<view class="icon">
					<image src="/static/imgs/i-mark.png" mode="widthFix"></image>
					<text class="i-txt" @click="toStore">店铺</text>
				</view>
				<view class="icon">
					<image src="/static/imgs/i-inform-on.png" mode="widthFix"></image>
					<text class="i-txt active">客服</text>
				</view>
				<view class="icon" @click="toCollect">
					<image :src="isCollected ? '/static/imgs/i-fstar.png' : '/static/imgs/i-fstar-n.png'"
						mode="widthFix"></image>
					<text class="i-txt">收藏</text>
				</view>
				<view class="button" @click="showSize">
					<view class="btn-shop">
						加入购物车
					</view>
				</view>
				<view class="button">
					<view class="btn-shop buy">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		get
	} from '../../api/index.js';
	const load = ref(false);
	const isSize = ref(false);
	const isServe = ref(false);
	const aTab = ref('图文详情');
	const goodsDetail = ref({});
	const itemId = ref('');
	const currentIndex = ref(-1);
	const currentImgs = ref([]);

	const curskuImgs = ref('');

	const selColor = ref('');
	const selSize = ref('');
	const number = ref(1);

	const isCollected = ref(false);
	const toCollect = () => {
		isCollected.value = !isCollected.value
	};

	const GoodsDetailMsg = async () => {
		try {
			load.value = true;
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const res = await get(`/goods/detail?itemId=${itemId.value}`);
			// console.log(res);
			goodsDetail.value = res.data;
			console.log('商品详情:', goodsDetail.value);

			currentImgs.value = goodsDetail.value.result.topImages;

		} catch (error) {
			console.log('获取失败:', error);
		} finally {
			load.value = false;
			uni.hideLoading();
		}
	};





	const formatDate = (timestamp) => {
		if (!timestamp) return;
		const date = new Date(timestamp * 1000);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		return `${year}年${month}月${day}日`;
	};

	const selIcon = () => {
		currentIndex.value = -1;
		if (goodsDetail.value.result.topImages) {
			currentImgs.value = goodsDetail.value.result.topImages;
		}
	}


	const previewImg = (index) => {
		const bigImgs = isSize.value ? [curskuImgs.value] : currentImgs.value;
		uni.previewImage({
			current: index,
			urls: bigImgs,
			indicator: "default",
			loop: true
		});
	}

	// 小图标
	const selectSku = (index) => {
		currentIndex.value = index;
		if (goodsDetail.value.result.skuBarInfo.list) {
			currentImgs.value = goodsDetail.value.result.skuBarInfo.list.map(item => item.image);
		}
	};



	const iconOne = computed(() => {
		if (goodsDetail.value.result.topImages.length > 0) {
			return goodsDetail.value.result.topImages[0] || '';
		}
		return '';
	});

	const curDiaPrice = computed(() => {
		const skus = goodsDetail.value.result.skuInfo.skus || [];
		if (selColor.value && selSize.value) {
			const selSku = skus.find(
				sku => sku.style == selColor.value && sku.size == selSize.value
			);
			if (selSku) {
				return (selSku.nowprice / 100).toFixed(2);
			}
			const defaultPrice = goodsDetail.value.result.skuInfo.defaultPrice || '';
			return defaultPrice.replace("¥", "");
		}
		return goodsDetail.value.result.normalPriceV2.nowPrice || 0;
	});

	// 评论标签
	const rateTags = computed(() => {
		if (
			goodsDetail.value.result.rateInfoV2.rateTags &&
			goodsDetail.value.result.rateInfoV2.rateTags.length > 0
		) {
			return goodsDetail.value.result.rateInfoV2.rateTags.slice(0, 3);
		}
		return [];
	});

	// 用户评论
	const rateList = computed(() => {
		return goodsDetail.value.result.rateInfoV2.list || [];
	})

	// 图文详情
	const detailImgs = computed(() => {
		if (goodsDetail.value.result?.detailInfo.detailImage?.[0]?.list) {
			return goodsDetail.value.result.detailInfo.detailImage[0].list;
		}
		return [];
	});

	// size弹出层
	const onlyColors = computed(() => {
		if (!goodsDetail.value.result.skuInfo.skus) return [];
		const colors = new Set();
		goodsDetail.value.result.skuInfo.skus.forEach(sku => {
			colors.add(sku.style);
		});
		return Array.from(colors);
	});

	const sizes = computed(() => {
		if (!goodsDetail.value.result.skuInfo.skus) return [];
		const unSizes = new Set();
		const sizeMap = new Map();
		goodsDetail.value.result.skuInfo.skus.forEach(sku => {
			if (!unSizes.has(sku.size)) {
				unSizes.add(sku.size);
				sizeMap.set(sku.size, sku.stock);
			}
		});
		return Array.from(unSizes).map(size => ({
			size,
			stock: sizeMap.get(size)
		}));
	});


	const currentStock = computed(() => {
		const skus = goodsDetail.value.result.skuInfo.skus || [];
		if (selColor.value && selSize.value) {
			const sku = skus.find(item =>
				item.style == selColor.value && item.size == selSize.value
			);
			return sku ? sku.stock : 0;
		};
		if (selColor.value) {
			return skus.filter(item => item.style == selColor.value)
				.reduce((sum, sku) => sum + sku.stock, 0);
		};
		if (selSize.value) {
			return skus.filter(item => item.size == selSize.value)
				.reduce((sum, sku) => sum + sku.stock, 0);
		}
		return goodsDetail.value.result?.skuInfo?.totalStock || 0;
	});

	const selText = computed(() => {
		if (selColor.value && selSize.value) {
			return `已选："${selColor.value} ${selSize.value}"`;
		} else if (selColor.value) {
			return `已选："${selColor.value}" 尺码`;
		} else if (selSize.value) {
			return `已选："${selSize.value}" 颜色`
		} else {
			return "尺码 颜色";
		}
	});

	const sizeDialogTop = computed(() => {
		if (selColor.value && selSize.value) {
			return `已选："${selColor.value} ${selSize.value}"`;
		} else if (selColor.value) {
			return `已选："${selColor.value}" 请选择尺码`;
		} else if (selSize.value) {
			return `已选："${selSize.value}" 请选择颜色`
		} else {
			return "请选择尺码 颜色";
		}
	})



	const selectColor = (color) => {
		if (selColor.value == color) {
			selColor.value = '';
		} else {
			selColor.value = color;

			const sku = goodsDetail.value.result.skuInfo.skus.find(
				item => item.style == color
			);
			if (sku) {
				curskuImgs.value = sku.img;
			}
		}
	};

	const selectSize = (sizeObj) => {
		if (sizeObj.stock <= 0) return;
		if (selSize.value == sizeObj.size) {
			selSize.value = '';
		} else {
			selSize.value = sizeObj.size;
		}
	};

	const addNum = () => {
		number.value += 1;
	};

	const reduceNum = () => {
		if (number.value > 1) {
			number.value -= 1
		};
	};

	const toIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	};
	const toStore = () => {
		const shopInfo = goodsDetail.value.result.shopInfo;
		    uni.navigateTo({
		      url: `/pages/store/store?shopName=${encodeURIComponent(shopInfo.name)}&shopLogo=${encodeURIComponent(shopInfo.shopLogo)}`
		    });
	}

	const showSize = () => {
		isSize.value = true;
		console.log(sizes.value);
		console.log(onlyColors.value);
	};
	const hideSize = () => {
		isSize.value = false;
	};
	const showServe = () => {
		isServe.value = true;
	};
	const hideServe = () => {
		isServe.value = false;
	};
	const switchTab = (tab) => {
		aTab.value = tab;
		if (tab == "商品参数") {
			uni.pageScrollTo({
				selector: '.goods',
				duration: 300
			});
		}
	};
	const toSale = () => {
		uni.navigateTo({
			url: '/pages/shopCart/shopCart'
		})
	}
	const addToCart = () => {
		let cartList = uni.getStorageSync('cart') || []
		if (curskuImgs.value && (selColor.value || selSize.value) && number.value) {
			let obj = {
				id: itemId.value,
				title: goodsDetail.value.result.itemInfo.title,
				shopName: goodsDetail.value.result.shopInfo.name,
				img_url: curskuImgs.value,
				color: selColor.value,
				size: selSize.value,
				num: number.value,
				price: curDiaPrice.value
			}
			let newArr = [...cartList, obj]
			uni.setStorageSync('cart', newArr)
			uni.showToast({
				title: '加入购物车成功'
			})
			isSize.value = false

		} else {
			uni.showToast({
				title: '请选择参数',
				duration: 3000,
				icon: 'error'
			})
		}
	}
	onLoad((opt) => {
		itemId.value = opt.itemId;
		console.log(itemId.value);
		GoodsDetailMsg().then(() => {
			selIcon();
			if (goodsDetail.value.result.skuInfo.skus.length > 0) {
				curskuImgs.value = goodsDetail.value.result.skuInfo.skus[0].img;
			}
		});
	});
</script>

<style lang="scss" scoped>
	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		flex-direction: column;
		font-size: 30rpx;
		color: #999;
	}

	.loading-spinner {
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #ff5777;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.eq-wrapper {
		width: 100%;
		font-size: 25rpx;
		background-color: #f9f9f9;
		padding-bottom: 84rpx;

		.arrow-right {
			width: 20rpx;
			cursor: pointer;
		}

		.headImg {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 15rpx;
			border: 1rpx solid #eee;
		}

		.eq-nav {
			background-color: #fff;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 20rpx;

			.navBar {
				padding: 10rpx 0;
			}

			.navBar.active {
				border-bottom: 1rpx solid #FE4469;
				color: #FE4469;
			}
		}

		.eq-box1 {
			position: relative;
			margin-top: 20rpx;

			.swiper-container {
				display: flex;
				flex-wrap: nowrap;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
				padding-bottom: 15rpx;

				&::-webkit-scrollbar {
					display: none;
				}
				
				&.oneImage {
				    justify-content: center; 
				    overflow-x: hidden; 
				  }

				.swiper-item {
					flex: 0 0 auto;
					width: 450rpx;
					height: 640rpx;
					margin-right: 20rpx;

					&:only-child {
						margin-right: 0 !important;
					}

					
					&:last-child {
						margin-right: 0;
					}
				}

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.pic-btn {
				position: absolute;
				top: 40rpx;
				right: 20rpx;

				.circle {
					margin-bottom: 20rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 1);
					opacity: .5;
					padding: 5rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						object-fit: contain;
					}
				}
			}
		}

		.eq-box2 {
			background-color: #fff;
			padding: 10rpx 20rpx;

			.clothes {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 10rpx 0;
				border-bottom: 1rpx solid #eee;

				.c-option {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					border: 1px solid #999;
					margin-right: 25rpx;
					box-sizing: border-box;
					overflow: hidden;
					flex-shrink: 0;

					.optImg {
						width: 100%;
					}
				}

				.c-option.active {
					border: 1rpx solid #FE4469;
				}

				.opt2 {
					display: flex;
					overflow-x: auto;
				}

				.c-explain {
					color: #999;
					margin-right: 20rpx;
					flex-shrink: 0;

					text {
						display: block;
						line-height: 1.5;
					}
				}
			}

			.price {
				.half {
					padding: 0rpx 15rpx;
					background-color: #fff3ef;
					color: #FE4469;
					width: 120rpx;
					margin-top: 20rpx;
				}

				.p-layout {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 20rpx;
					padding: 10rpx 0;

					.p-left {
						display: flex;
						align-items: center;

						.p-bold {
							margin-right: 20rpx;

							text {
								margin-left: 5rpx;
								font-size: 40rpx;
								font-weight: bold;
							}
						}

						.p-cheap {
							background-color: #FE4469;
							color: #fff;
							padding: 5rpx 10rpx;
							border-radius: 30rpx;
							letter-spacing: 2rpx;

							text {
								font-size: 30rpx;
								font-weight: bold;
							}
						}
					}
				}
			}

			.free {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.f-opt {
					padding: 0rpx 15rpx;
					background-color: #fff3ef;
					color: #FE4469;
				}

				.look {
					color: #FE4469;
				}
			}

			.inform {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.inform-text {
					flex-wrap: wrap;
					width: 500rpx;
					line-height: 1.5;
					font-size: 27rpx;
				}

				.inform-option {
					padding: 5rpx 20rpx;
					background-color: #f0f0f0;
					border-radius: 30rpx;
					text-align: center;

					image {
						width: 30rpx;
						margin-right: 5rpx;
					}

					text {
						color: #ccc;
					}
				}
			}

		}

		.eq-box3 {
			background-color: #fff;
			padding: 10rpx 15rpx;
			margin-top: 20rpx;

			.eq-label {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;

				.grey {
					color: #ccc;
					margin-right: 20rpx;
				}

				.line {
					color: #ccc;
				}

				.label-left {
					display: flex;
				}
			}

		}

		.eq-size-mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1;
		}

		.eq-sizeDialog {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			transform: translateY(100%);
			transition: transform .3s linear;
			z-index: 100;
			display: block;

			&.active {
				transform: translateY(0);
			}

			.box {
				padding: 20rpx 20rpx 0;

				.b-header {
					display: flex;
					padding-left: 200rpx;
					justify-content: space-between;
					position: relative;

					image {
						width: 160rpx;
						height: 200rpx;
						border-radius: 20rpx;
						position: absolute;
						left: 0;
						top: -80rpx;
					}

					.b-msg {
						line-height: 1.7;

						.option {
							// color: #FE4469;
							color: #000;
							font-size: 24rpx;
							margin-top: 10rpx;
						}

						.price {
							margin-bottom: 10rpx;
						}

						.light {
							color: #FE4469;
						}
					}

					.close {
						font-size: 40rpx;
						margin-right: 30rpx;
						font-weight: bold;
					}
				}

				.b-mid {
					margin-top: 40rpx;

					.module {
						padding: 25rpx 0;
						line-height: 1.7;
						border-bottom: 1rpx solid #eee;

						&:nth-child(3) {
							border-bottom: 0;
						}

						.cap {
							color: #aaa;
						}
						.t-color {
							height: 240rpx;
							overflow-y: auto;
						}
						.type {
							margin-top: 20rpx;
							display: flex;
							flex-wrap: wrap;
							

							.b {
								display: block;
								margin-top: 20rpx;
								margin-right: 15rpx;
								border: 1rpx solid #ccc;
								padding: 5rpx 20rpx;
								color: #000;

								&.active {
									color: #FE5779;
									border-color: #FE5779;
								}

								&.null {
									background-color: #fafafa;
									border-color: transparent;
									color: #ccc;
								}
							}

							.selText {
								color: #000;
							}

							.n {
								padding: 5rpx 30rpx;
								border: 1rpx solid #f0f0f0;

								&:nth-child(1) {
									background-color: #fafafa;
								}

								&:nth-child(3) {
									color: #FE4469;
								}
							}

						}
					}
				}
			}

			.use {
				background-color: #FFFBF9;
				text-align: center;
				line-height: 1.7;
				padding: 15rpx 0;

				text {
					color: #FE4469;
					font-weight: bold;
				}
			}

			.b-footer {
				width: 100%;
				height: 80rpx;
				display: flex;
				flex-shrink: 0;
				align-items: center;
				text-align: center;

				.add {
					padding: 25rpx 0;
					width: 50%;
					background-color: #fff3ef;
					color: #FE4469;
				}

				.buy {
					padding: 25rpx 0;
					width: 50%;
					background-color: #FE4469;
					color: #fff;
				}

			}
		}

		.eq-serveDialog {
			position: fixed;
			bottom: 0rpx;
			left: 0;
			background-color: #fff;
			width: 100%;
			color: #999;
			padding: 20rpx 20rpx 60rpx;
			box-sizing: border-box;
			transform: translateY(100%);
			transition: transform .5s linear;
			z-index: 100;

			&.active {
				transform: translateY(0);
			}

			.d-top {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.close {
					position: absolute;
					top: -5rpx;
					right: 0;
					font-size: 40rpx;
					font-weight: bold;
				}
			}

			.d-mid {
				margin-top: 20rpx;

				.d-cont {
					padding: 15rpx 0;
					line-height: 1.5;
					border-bottom: 1rpx solid #eee;

					.d-first {
						color: #000;
					}
				}
			}
		}

		.eq-box4 {
			background-color: #fff;
			padding: 20rpx 15rpx;
			margin-top: 20rpx;

			.c-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;
				margin-bottom: 20rpx;

				.pink {
					color: #FE4469;
				}
			}

			.c-sorce {
				.tip {
					display: flex;
					align-items: center;
				}
			}

			.mark-mid {
				display: flex;
				align-items: center;
				margin: 25rpx 0;

				.opt {
					padding: 8rpx 15rpx;
					background-color: #fff3ef;
					margin-right: 20rpx;

					text {
						color: #FE4469;
					}
				}
			}

			.card {
				display: flex;
				flex-shrink: 0;
				overflow-x: auto;
				width: 100%;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;

				&::-webkit-scrollbar {
					display: none;
				}

				.c-mid {
					background-color: #fafafa;
					padding: 20rpx 25rpx;
					min-width: 600rpx;
					width: auto;
					margin-right: 20rpx;

					.m-top {
						display: flex;
						flex-shrink: 0;
						flex: 1;
						align-items: center;
						margin-bottom: 15rpx;

						.left {
							margin-right: 15rpx;
						}

						.right {
							text {
								display: block;
								line-height: 1.7;
							}

							.username {
								font-weight: bold;
								font-size: 24rpx;
							}

							.date {
								color: #aaa;
							}
						}
					}

					.m-connent {
						margin-top: 5rpx;
						min-height: 70rpx;
						height: auto;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						line-height: 1.5;
					}
				}


			}
		}

		.eq-box5 {
			background-color: #fff;
			padding: 20rpx 15rpx;
			margin-top: 20rpx;
			box-sizing: border-box;

			.mark-head {
				display: flex;
				align-items: start;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: start;

					.m-pic {
						margin-right: 20rpx;
						width: 100rpx;
						height: 100rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						font-weight: bold;
						font-size: 30rpx;
					}

					.txt {
						margin-top: 15rpx;
						color: #aaa;
						display: flex;
						align-items: center;

						text {
							margin-left: 30rpx;
						}
					}

					.types {
						margin-top: 25rpx;
						display: flex;
						flex-wrap: wrap;

						text {
							margin-top: 15rpx;
							margin-right: 25rpx;
							border: 1rpx solid #eee;
							color: #FE5779;
							border-radius: 20rpx;
							padding: 5rpx 20rpx;
						}
					}
				}

				.right {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					flex-shrink: 0;
				}
			}

			.mark-bottom {
				border-top: 1rpx solid #eee;
				padding-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left-txt {
					line-height: 1.7;

					text {
						margin-left: 20rpx;
						background-color: #fff3ef;
						color: #FE4469;
					}

					.star image {
						margin-right: 5rpx;
						width: 20rpx;
					}

					.num {
						color: #aaa;
						background-color: transparent;
					}
				}
			}
		}

		.eq-box6 {
			background-color: #fff;
			margin-top: 20rpx;

			.title {
				padding: 20rpx 25rpx;
				display: flex;
				justify-content: space-around;

				.t1 {
					padding: 20rpx 0;
					font-size: 35rpx;
				}

				.active {
					border-bottom: 1rpx solid #FE4469;
					color: #FE4469;
				}
			}

			.desc {
				width: 100%;
				padding: 30rpx 25rpx;
				box-sizing: border-box;
				line-height: 1.5;
				color: #999;
			}

			.detailImg {
				margin-top: 30rpx;
				width: 100%;

				image {
					width: 100%;
				}
			}

			.goods {
				padding: 20rpx 25rpx;
				margin-top: 30rpx;

				.g-title {
					color: #777;
					margin-bottom: 25rpx;
				}

				.g-layout {
					background-color: #F6F6F6;
					width: 100%;
					padding-top: 15rpx;
				}

				.g-box {
					width: 100%;
					display: flex;
					padding: 10rpx 30rpx;
					box-sizing: border-box;

					.g-typename {
						width: 35%;
						color: #aaa;
					}

					.g-params {
						width: 65%;
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.g-all {
						width: 100%;
						display: flex;
						align-items: center;
						color: #aaa;

						text {
							margin-right: 5rpx;
						}

					}
				}
			}
		}

		.eq-footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 80rpx;
			background-color: #fff;
			border-top: 1px solid #f0f0f0;
			z-index: 10;

			.eq-layout {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100%;
				padding: 0 10rpx;

				.icon {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
					width: 14%;
					height: 100%;
					cursor: pointer;

					image {
						width: 30rpx;
						margin-bottom: 4rpx;
					}

					.i-txt {
						font-size: 20rpx;
						color: #999;

						&.active {
							color: #FE4469;
						}

					}
				}

				.button {
					display: flex;
					flex-shrink: 0;
					height: 100%;
					width: 30%;

					.btn-shop {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100%;
						background-color: #FFECEF;
						color: #FE4469;
						font-size: 26rpx;

						&.buy {
							background-color: #FE4469;
							color: #fff;
						}
					}

				}
			}
		}

	}
</style>